<#include "/common/taglibs.ftl" />
<@menu code='personal.message'/>
<title><@spring.message code="${entityName!}" /> - <@spring.message code="list" /></title>
<div class="m-portlet m-portlet--mobile m-portlet--tabs">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    <i class="la la-user"></i> <@spring.message code="${entityName!}"/>
                </h3>
            </div>
        </div>
        <div class="m-portlet__head-tools">
            <ul class="nav nav-tabs m-tabs-line m-tabs-line--success m-tabs-line--2x" role="tablist">
                <#list states as s>
                    <#if s != 'delete_box'>
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link ${(state == s)?string('active','')}" href="${ctx}/personal/message/${s}/list" >
                                <i class="fa fa-table"></i> <@spring.message code="${s.info}"/>
                            </a>
                        </li>
                    </#if>
                </#list>
            </ul>
        </div>
    </div>
    <div class="m-portlet__body">
        <div class="table-container">
            <@showMessage />
            <@tableHeaderButtons resourceIdentity='${resourceIdentity!}' buttons=[]>
                <button class="btn btn-sm btn-outline-brand m-btn m-btn--icon" data-type="send"><i class="fa fa-comments"></i> <@spring.message code="op.send.new"/><@spring.message code="${entityName!}"/></button>
                <#if state == 'in_box'>
                    <button class="btn btn-sm btn-outline-brand m-btn m-btn--icon" data-type="mark-read"><i class="fa fa-bookmark"></i> <@spring.message code="op.mark.as.read"/></button>
                </#if>

                <#if (state != 'draft_box') & (state != 'store_box') & (state != 'trash_box')>
                    <button class="btn btn-sm btn-outline-brand m-btn m-btn--icon" data-type="store"><i class="fa fa-briefcase"></i> <@spring.message code="op.save.store"/></button>
                </#if>

                <#if state == 'trash_box'>
                    <button class="btn btn-sm btn-outline-brand m-btn m-btn--icon" data-type="store"><i class="fa fa-briefcase"></i> <@spring.message code="op.recover.store"/></button>
                </#if>
                <button class="btn btn-sm btn-outline-brand m-btn m-btn--icon " data-type="clear"><i class="fa fa-eraser"></i> <@spring.message code="op.clear"/><@spring.message code="${state.info!}"/></button>
            </@tableHeaderButtons>
            <table class="table table-striped- table-bordered table-hover table-checkable dataTable dtr-inline" id="datatable"
                   data-datatable="true"
                   data-datatable-advance-search="show"
                   data-datatable-draw-callback="drawCallback"
                   data-datatable-quick-search-filter="search_LIKE_title_OR_content"
            >
                <thead>
                <tr role="row" class="heading">
                    <th width="1%" data-checkable="true" data-orderable="false"></th>
                    <th width="5%" data-data="id" data-searchable="false"> ID# </th>
                    <#if state != 'in_box'>
                        <th width="8%" data-data="receiverId" data-render="renderReceiver" > <@spring.message code="message.receiver"/> </th>
                    </#if>
                    <#if state != 'out_box'>
                        <th width="8%" data-data="senderId" data-render="renderSender" > <@spring.message code="message.sender"/> </th>
                    </#if>
                        <th width="15%" data-data="title" data-render="renderTitle"> <@spring.message code="message.title"/> </th>
                        <th data-data="content"> <@spring.message code="message.content"/> </th>
                    <#if state == 'draft_box'>
                        <th width="15%" class="center" data-data="lastModifiedDate" data-search-type="daterange" data-render="renderDateTime"> <@spring.message code="lastModifyDate"/> </th>
                    <#else>
                        <th width="15%" class="center" data-data="sendDate" data-search-type="daterange" data-render="renderDateTime"> <@spring.message code="message.sendDate"/> </th>
                    </#if>
                </tr>
                </thead>
                <tbody> </tbody>
            </table>
        </div>
    </div>
</div>
<page-plugin-style>
</page-plugin-style>
<page-plugin-script>
</page-plugin-script>
<page-style>
</page-style>
<page-script>
    <#include "/system/script.ftl" />
	<script>
    	var renderReceiver = function ( data, type, full, meta ){
    		var extraData = getExtraData(meta);
    		var id = full.receiverId;
    		var obj = extraData.users[id];
    		return obj?label(obj.name):notFoundData(id,'<@spring.message code="user"/>');
        }
    	var renderSender = function ( data, type, full, meta ){
    		var extraData = getExtraData(meta);
    		var id = full.senderId;
    		var obj = extraData.users[id];
    		return obj?label(obj.name):notFoundData(id,'<@spring.message code="user"/>');
        }
    	
    	var renderTitle = function ( data, type, full, meta ){
    		var id = full.id;
    		var title = full.title;
    		var state = '${state!}';
    		if(state == 'draft_box'){
    			return '<a href="${ctx}/personal/message/draft/'+id+'/send" class="btn btn-link no-padding">'+title+'</a>'
    		} else {
    			var html = '<a href="${ctx}/personal/message/'+id+'" class="btn btn-link no-padding">'+title+'</a>';
    			if(!full.read){
    				html = '<span class="label label-danger"><@spring.message code="message.unread"/></span>' + html;
    			}
    			return html;
    		}
        }
    	
		jQuery(function($){
            $('#datatable').on('action.mdt.tool.button', function (e, grid, $table, $button) {
                var type = $button.data("type");
                if (type === 'send') {
                    window.location.href = "${ctx}/personal/message/send";
                    return;
                } else if (type === 'clear'){
                    var state = "${state!}";
                    var stateInfo = '<@spring.message code="${state.info!}"/>';

                    $.m.confirm({
                        title: '<@spring.message code="op.clear"/>' + stateInfo,
                        message: '<@spring.message code="message.sure.to.clear" />' + stateInfo + '<@spring.message code="question.suffix" />',
                        ok: function () {
                            location.href = "${ctx}/personal/message/clear/" + state;
                        }
                    });
                } else if (type === 'mark-read') {
                    if (grid.getSelectedRowsCount() === 0) {
                        grid.alertNoRecordSelected();
                        return;
                    }
                    window.location.href = "${ctx}/personal/message/mark/read?" + grid.getSerializeSelectedRowIds() + "&BackURL=" + window.location.pathname;
                } else if (type === 'store') {
                    if (grid.getSelectedRowsCount() === 0) {
                        grid.alertNoRecordSelected();
                        return;
                    }
                    $.m.confirm({
                        title: '<@spring.message code="op.save.store"/>',
                        message: '<@spring.message code="sure.prefix"/><@spring.message code="op.save.store"/><@spring.message code="question.suffix"/>',
                        ok: function () {
                            window.location.href = "${ctx}/personal/message/batch/store?" + grid.getSerializeSelectedRowIds();
                        }
                    });
                } else if (type === 'recycleOrDelete') {
                    var state = "${state!}";
                    var isRecycle = state != 'trash_box';
                    <#--var stateInfo = '<@spring.message code="${state.info!}"/>';-->

                    $.m.confirm({
                        title: isRecycle ? '<@spring.message code="op.move.trash"/>' : '<@spring.message code="op.delete.trash"/>',
                        message: isRecycle ? '<@spring.message code="sure.prefix"/><@spring.message code="op.move.trash"/><@spring.message code="question.suffix"/>' : '<@spring.message code="sure.prefix"/><@spring.message code="op.delete.trash"/><@spring.message code="question.suffix"/>',
                        ok: function () {
                            location.href = "${ctx}/personal/message/batch/" + (isRecycle ? 'recycle' : 'delete') + "?" + grid.getSerializeSelectedRowIds();
                        }
                    });
                }
            });
		});
	</script>
</page-script>